<script setup lang="ts">

import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import { BaiduImageryProvider } from '@/util/baidu/Q3D_JS_BaiduImageryProvider';
import { AmapImageryProvider } from '@/util/amap/Q3D_JS_AmapImageryProvider';

var _viewer: Cesium.Viewer;

onMounted(() => {

  // q3d_f_cesium_init_default(); // 使用默认的 Token 和默认界面
  q3d_f_cesium_init_q3d(); // 使用自己的 token，并定制界面

  q3d_f_cesium_locate_to_beihai(); // 镜头设定位置到北海市

  let geojson_bound_county_2022: string = 'geojson_bound_county_2022/01_Country/01_Country.geojson';
  // geojson_bound_county_2022= 'geojson_bound_county_2022/02_Province/02_Province.geojson';
  // geojson_bound_county_2022 = 'geojson_bound_county_2022/03_City/03_City.geojson';
  // geojson_bound_county_2022 = 'geojson_bound_county_2022/04_County/04_County.geojson';
  q3d_f_cesium_load_geojson(geojson_bound_county_2022); // 加载 .geojson 文件

})

const q3d_f_cesium_init_default = () => { // 使用默认的 Token 和默认界面
  var _viewer = new Cesium.Viewer('cesiumContainer');
}

const q3d_f_cesium_init_q3d = () => { // 使用自己的 token，并定制界面

  // 用默认 Token 也可以，但自建 Token 可拥有更多权限：<https://cesium.com/ion/tokens>
  // Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMjIxNmUwZi01ZWY3LTQzMjQtOGEyNC01NzM1ZGI4ZTkxZDQiLCJpZCI6MTE5MTA2LCJpYXQiOjE2NzE3NjEyODd9.J_4RIj6vxs0KBs5nSmYG7LI13r6n35QdJUgGmzPChe8';

  var IPD_Baidu_Satellite_WGS84 = new BaiduImageryProvider({ // 百度卫星影像，WGS84 坐标
    url: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
    layer: 'tdtAnnoLayer',
    style: 'default',
    format: 'image/jpeg',
    minimumLevel: 1,
    maximumLevel: 18,
    // subdomains: this.subdomains,
    tileMatrixSetID: 'GoogleMapsCompatible',
    crs: 'WGS84', // 坐标系: WGS84 、BD09 、GCJ02，仅百度、高德有效
    tilingScheme: null
  });

  var IPD_Amap_Satellite_WGS84 = new AmapImageryProvider({ // 高德卫星影像，WGS84 坐标
    url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', // 高德卫星影像
    layer: 'tdtAnnoLayer',
    style: 'default',
    format: 'image/jpeg',
    minimumLevel: 1,
    maximumLevel: 18,
    // subdomains: this.subdomains,
    tileMatrixSetID: 'GoogleMapsCompatible',
    crs: 'WGS84', // 坐标系: WGS84 、BD09 、GCJ02，仅百度、高德有效
    tilingScheme: null
  });

  //卫片 " http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",   
  //路网" https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=11"   
  //地名" https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=4"
  //地名+路网 " http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
  //矢量切片风格 " http://webrd01.is.autonavi.com/appmaptile?&scale=1&lang=zh_cn&style=8&x={x}&y={y}&z={z}",

  var IPD_AMap_Satellite_GCJ = new Cesium.UrlTemplateImageryProvider({ // 高德影像地图，GCJ-02 坐标
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    minimumLevel: 1,
    maximumLevel: 18
  })

  var IPD_AMap_Navigation_GCJ = new Cesium.UrlTemplateImageryProvider({ // 高德导航地图，GCJ-02 坐标
    url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    minimumLevel: 1,
    maximumLevel: 18
  })

  var IPD_AMap_Label_GCJ = new Cesium.UrlTemplateImageryProvider({ // 高德地图标注，GCJ-02 坐标
    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    minimumLevel: 1,
    maximumLevel: 18
  })

  _viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, // 是否开启地球时间工具
    baseLayerPicker: false, // 是否开启界面右上角的切换栅格图源按钮
    fullscreenButton: false, // 是否开启全屏按钮
    vrButton: false, // 是否开启 VR 按钮
    geocoder: false, // 是否开启位置搜索按钮
    homeButton: true, // 是否开启 Home 按钮
    projectionPicker: true, // 是否开启平行视图和透视视图切换按钮
    sceneModePicker: true, // 是否开启球形投影和平面投影切换按钮
    infoBox: false, // 未知
    selectionIndicator: false, // 是否开启悬浮操作说明
    timeline: false, // 是否开启时间线工具栏
    navigationHelpButton: false, // 是否开启帮助按钮
    navigationInstructionsInitiallyVisible: true, // 未知
    shadows: false, // 是否开启模型阴影
    // creditContainer: 'DOM_CreditContainer', // Cesium 默认版权信息会显示在左下角，除非指定一个隐藏的 DOM 容器来存储它
    // creditViewport: 'DOM_CreditViewport', // Cesium 默认版权信息会显示在左下角，除非指定一个隐藏的 DOM 容器来存储它
    imageryProvider: IPD_AMap_Satellite_GCJ, // 使用自定义栅格图源，要求 baseLayerPicker 设为 false 才能生效
    // imageryProvider: IPD_Amap_Satellite_WGS84, // 使用自定义栅格图源，要求 baseLayerPicker 设为 false 才能生效
    // imageryProvider: IPD_AMap_Navigation_GCJ, // 使用自定义栅格图源，要求 baseLayerPicker 设为 false 才能生效
    terrainProvider: Cesium.createWorldTerrain({ // 创建 3D 地形
      requestWaterMask: true, // 是否启用水面效果
      requestVertexNormals: true, // 是否启用顶点法向
    })
  });

  _viewer.imageryLayers.addImageryProvider(IPD_AMap_Label_GCJ); // 在底图上加标注

}

const q3d_f_cesium_locate_to_newyork = () => { // 镜头设定位置到纽约市，并加载一些 OSM 模型
  _viewer.camera.setView({
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888), // 使用三维坐标系
    orientation: { // 镜头视角
      heading: 0.60, // 水平旋转 0.6
      pitch: -0.66, // 垂直俯仰 -0.66
    }
  });
  var T_NewYorkCity = new Cesium.Cesium3DTileset({ // 使用 Cesium 自带的模型库
    url: Cesium.IonResource.fromAssetId(3839), // Cesium 自带模型库中的 3839 号模型（纽约市建筑）
  });
  var TS_Color_By_Height = new Cesium.Cesium3DTileStyle({ // 配置渲染风格
    color: { // 着色
      conditions: [ // 根据条件应用不同值
        ['${height} >= 300', 'rgba(45,0,75,0.5)'],
        ['${height} >= 200', 'rgba(102,71,151,0.5)'],
        ['${height} >= 100', 'rgba(170,162,204,0.5)'],
        ['${height} >= 50', 'rgba(224,226,238,0.5)'],
        ['${height} >= 25', 'rgba(252,230,200,0.5)'],
        ['${height} >= 10', 'rgba(248,176,87,0.5)'],
        ['${height} >= 5', 'rgba(198,106,11,0.5)'],
        ["true", 'rgba(127,59,8,0.5)'],
      ]
    }
  });
  T_NewYorkCity.style = TS_Color_By_Height; // 风格赋予模型
  _viewer.scene.primitives.add(T_NewYorkCity); // 往场景中添加模型
  _viewer.scene.primitives.add(Cesium.createOsmBuildings()); // 也可以使用 Cesium 自带的 OSM Buildings（a global 3D buildings layer）
}

const q3d_f_cesium_locate_to_beihai = () => { // 镜头设定位置到北海市
  // _viewer.camera.flyTo({ // 镜头动态切换，可以使用 duration 设定飞行时间(秒)
  _viewer.camera.setView({ // 镜头直接切换
    // destination: Cesium.Cartesian3.fromDegrees(109.149254, 21.233343, 20000), // 北海市区经纬度坐标 + 高度
    destination: Cesium.Cartesian3.fromDegrees(109.339254, 20.953343, 60000), // 北海市（含合浦县）经纬度坐标 + 高度
    orientation: { // 镜头视角
      heading: Cesium.Math.toRadians(0), // 水平旋转 0 度
      pitch: Cesium.Math.toRadians(-40), // 垂直俯仰 45 度
    }
  });
}

const q3d_f_cesium_locate_to_china = () => { // 镜头设定位置在中国(中心大概在西安的位置)
  // _viewer.camera.flyTo({ // 镜头动态切换，可以使用 duration 设定飞行时间(秒)
  _viewer.camera.setView({ // 镜头直接切换
    // destination: Cesium.Cartesian3.fromDegrees(109, 34, 1000000), // 西安市区经纬度坐标 + 高度
    destination: Cesium.Cartesian3.fromDegrees(109.339254, 20.953343, 60000), // 北海市（含合浦县）经纬度坐标 + 高度
    orientation: { // 镜头视角
      heading: Cesium.Math.toRadians(0), // 水平旋转 0 度
      pitch: Cesium.Math.toRadians(-90), // 垂直俯仰 45 度
    }
  });
}

const q3d_f_cesium_load_geojson = (geojson_file_name: string) => { // 根据文件名加载 .geojson 文件
  let promise = Cesium.GeoJsonDataSource.load(
    geojson_file_name,
    {
      stroke: Cesium.Color.WHITE,
      fill: Cesium.Color.BLUE.withAlpha(0.3),
      strokeWidth: 5
    }); // 加载为 GeoJson 数据
  promise.then((dataSource) => {
    console.log(dataSource.entities.values); // Geojson 数据
    _viewer.dataSources.add(dataSource);
    // viewer.flyTo(dataSource);
  });
}
  //   let shpData = Cesium.GeoJsonDataSource.load(data);
  //   shpData.then(function (dataSource) {
  //     _viewer.dataSources.add(dataSource).then((res) => {
  //       shpEntity = res;
  //     });
  //     var entities = dataSource.entities.values;
  //     var colorHash = {};
  //     _viewer._cesiumWidget._creditContainer.style.display = "none";
  //     for (var i = 0; i < entities.length; i++) {
  //       var entity = entities[i];
  //       var name = entity.name;
  //       var color = colorHash[name];
  //       if (!color) {
  //         color = Cesium.Color.fromRandom({
  //           alpha: 1,
  //         });
  //         colorHash[name] = color;
  //       }

  //       entity.polygon.classificationType =
  //         Cesium.ClassificationType.TERRAIN;

  //       entity.polygon.material = Cesium.Color.fromRandom({
  //         red: 0.1,
  //         maximumGreen: 0.5,
  //         minimumBlue: 1,
  //         alpha: 1,
  //       });

  //       entity.polygon.outline = true;
  //       entity.polygon.outlineColor = Cesium.Color.LIGHTGREEN.withAlpha(1);
  //       entity.polygon.outlineWidth = 15;
  //       //设置高度
  //       entity.polygon.extrudedHeight = 5;
  //       //计算生成polygon的中心位置
  //       var polyPositions = entity.polygon.hierarchy.getValue(
  //         Cesium.JulianDate.now()
  //       ).positions;
  //       var polyCenter =
  //         Cesium.BoundingSphere.fromPoints(polyPositions).center;
  //       polyCenter =
  //         Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
  //       entity.position = polyCenter;

  //   viewer.flyTo(shpData);

</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex: 1;
}
</style>
